<template>
  <div>
    <button @click="Show">显示|隐藏</button>

    <!--    想谁有动画效果，就用transition包裹起来  appear 直接来就有动画-->
    <transition-group
        name="animate__animated animate__bounce"
        enter-active-class="animate__swing"
        leave-active-class="animate__backOutUp"
        :appear="true">
      <h1 v-show="isShow" key="2">重庆啊</h1>
    </transition-group>

  </div>
</template>

<script>
import 'animate.css'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Test",
  data(){
    return{
      isShow:true,
    }
  },
  methods:{
    Show(){
      this.isShow = !this.isShow
    },

  }

}
</script>

<style scoped>
h1{
  background-color: #de6b38;
  /*!*完成整个的过渡效果*!*/
  /*transition: 0.5s linear;*/
}



</style>